<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05 v-model</title>
</head>
<body>
  <div id="app">
    <!-- vue输入绑定 -->
    <!-- value  input -->
    <input type="text" v-model.lazy="userName" placeholder="用户名"/>{{ userName }}<br />
    <input type="password" v-model="password" placeholder="密码"/><br />
    <input type="text" v-model.number="age" placeholder="年龄"/><br />
    <!-- checked change -->
    <input type="radio" v-model="sex" v-bind:value="1"/>男
    <input type="radio" v-model="sex" :value="0"/>女<br />
    <input type="checkbox" v-model="hobby" value="篮球">篮球
    <input type="checkbox" v-model="hobby" value="足球">足球
    <input type="checkbox" v-model="hobby" value="网球">网球
    <input type="checkbox" v-model="hobby" value="排球">排球<br />
     <!-- value change -->
    <select v-model="lesson">
      <option value="" disabled>请选择</option>
      <option :value='1'>1阶段</option>
      <option :value='2'>2阶段</option>
      <option :value='3'>3阶段</option>
    </select>
    <!-- value  input -->
    <textarea v-model.trim="note" placeholder="备注"></textarea><br />
    <!-- checked change -->
    <input type="checkbox" v-model="flag">同意****协议
    <button v-on:click="getData">获取数据</button>

  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      userName: '',
      password: '',
      age: 0,
      sex: 1,
      hobby: ['网球'],
      note: '',
      lesson: '',
      flag: false
    },
    methods: { // 表示自定义事件的地方
      getData () {
        if (this.flag) {
          console.log({
            userName: this.userName,
            password: this.password,
            age: this.age,
            sex: this.sex === 1 ? '男' : '女',
            hobby: this.hobby,
            lesson: this.lesson === 1 ? '1阶段' : this.lesson === 2 ? '2阶段' : '3阶段',
            note: this.note
          })
        } else {
          alert('请先勾选用户协议')
        }
      }
    }
  })
</script>
</html>
